joyheron / responsible-web-apps Goto Github PK

Part of having a responsive and accessible web app would include using the latest HTML standards. The <tt> element is obsolete in the HTML5 and WHATWG HTML recommendations/standards. Depending on what you were using the <tt> element for, would determine which element you would use. For keyboard input, use the <kbd> element; for variables, use the <var> element; for computer code, use the <code> element; and for computer output, use the <samp> element.

The "Descriptive alt text for images" section mentions that:

...we should be verbose: we should use the alt to describe the picture visually for those users who cannot see it.

This statement actually seems to run counter to advice I've seen about alt texts in another article, "Alt-Texts: The Ultimate Guide", which says (among lots of other super helpful tips) that:

[A sighted user viewing an image] can also get the necessary information from the image at a glance, and that’s what we’re trying to achieve for users with screen readers as well. Give the necessary information in the alt-text, but make it as short and concise as possible.

In the aria-label and aria-labelledby section, the opening sentence says:

Sometimes we have visual elements which add information to the UI, but are missing in the UI.

I have read and re-read that several times and have failed to understand what it means. Perhaps a short example might help.

Thanks for a wonderful article by the way and apologies for accidentally submitting the issue before I'd even written the description.

Hi,

Thanks for detailed explanation with examples.

But, I have seen all examples only using CSS grids.

Can the same examples be showcased with CSS Flexbox too? Why because, CSS grids is not supported in IE-11 :(

Hello, thank you for the really good tips on that website :)

I would like to suggest to add some tips regarding meta tags for the SEO in accessibility section. Because they are also the important part of accessibility.

<h3 id="Accessibility-Seo">Adding meta tags<a href="#Accessibility-Seo" aria-label="Link to Adding meta tags"></a></h3>

Back in 2016, WHATWG added to the HTML spec the ability to include <div> elements inside of <dl> elements and later was ported by W3C into the HTML 5.2 Recommendation. As a result, the following markup is now allowed in HTML:

<dl>
    <div>
        <dt><cite>FBI</cite></dt>
        <dd><cite>FBI</cite>, a crime drama television program, centers around the inner workings of the New York field office of the FBI as they work major cases involving terrorism, kidnapping, organized crime, and counterintelligence.</dd>
    </div>
    <div>
        <dt><cite>Criminal Minds</cite></dt>
        <dd><cite>Criminal Minds</cite>, a police&#8211;procedural television program, follows profilers of the Behavioral Analysis Unit of the FBI as they profile the criminal unsub or &#8220;unknown subject&#8221;).</dd>
    </div>
    <div>
        <dt><cite>Bones</cite></dt>
        <dd><cite>Bones</cite>, a crime comedy&#8211;drama, features the joint efforts of FBI Special Agent Seeley Booth and forensic anthropologist Dr. Temperance &#8220;Bones&#8221; Brennan as they solve FBI crimes concerning human remains.  The characters use forensic anthropology and forensic archaeology in the course of solving the crimes.</dd>
    </div>
</dl>

"CSS for mobile devices" section
https://responsibleweb.app/#CSS-Grid-with-Breakpoints

Did you intentionally assign the two asides to the "header" grid area in your code example?

BTW, thanks for developing responsibleweb.app - it's very helpful material