I am aware than in many cases an HTML element does more than simple affect the page semantically, and the additional functionality make it a no-brainer choice. For example, although there is a textbox ARIA role, it is nearly always preferable to just use an <input> or <textarea> element whenever possible.
However, for "semantic" HTML elements, I can't find any information indicating that they do anything more than supply a default ARIA role for the purpose of accessibility and provide some minor code readability enhancements. For example, the only purpose of the <main> element (as far as I can tell) seems to be a "shortcut" to avoid typing out a few extra characters <div role="main">, also resulting in a slight readability improvement.
So, is that tiny readability improvement really the only reason to use <main> over <div role="main">, or are there other reasons I might be missing? Is there any conceivable reason that I would ever want to prefer the latter?
Semantically structuring your page with semantic HTML makes the contents machine-readable for the browser, browser extensions, search engines and other tools without extending their code to cover ARIA as well.
This is especially important for accessibility, as assistive technology are such tools, which might attach additional functionality to certain roles.
The browser’s read mode, for example, can easily extract contents from a <main>. Also handling role attributes makes coding it more difficult.
Also writing user stylesheets to improve accessibility is way easier if you don’t need to cover ARIA attributes.
W3C has written a complete doc about using aria : Using ARIA by W3C
The first rule of ARIA explains that you prioritize the native HTML element or attribute with the semantics and behavior already built in.
In your example, the element is a native HTML element with an implicit main role. You can give a look to the complete list of implicit roles of HTML.
Related
I'm tasked with evaluating some legacy web pages (classic asp) for accessibility. You can assume the HTML is not perfectly formed and that it's loaded with inline javascript and that we make use of javascript libraries that vomit HTML to create dynamic features. It's a circus in there.
While I recognize that the obvious answer is to re-write the page(s), that's not an option in our given time tables. So I'm trying to find the best way to make the pages work with a screen reader. Here's what I think I know.
We can use JAWS scripting to instruct the browser how to read the page.
We can use ARIA attributes to give the pages better organization and structure.
Specifically, I'm trying to figure out:
Question 1) If a JAWS script is present, will it be used exclusively by the browser/screen reader and ignore any improvements I make in the underling HTML structure?
Question 2) Could some well-place ARIA attributes give the page enough structure so that the default screen reader properties will work in an acceptable manner (without a JAWS script).
Question 3) I suspect the tough answer is that I would need to do both, which I'm trying to avoid because we barely have the capacity to do just one. But we don't want to lose a customer, of course. :-(
Many thanks for any input.
Instead of explaining only to JAWS how to access your pages, use JavaScript to explain it to any Assistive Technology (AT) for the web. I expect the same effort, while it will profit way more users.
In a JAWS script you would need to describe ways to access DOM nodes that are not accessible. That would include
speaking out information that you have to find elsewhere on the page
adding keyboard navigation where it's missing
Both can be done in JavaScript, probably even easier (you'll need to address DOM elements).
What you will need to avoid is restructuring the DOM and changes to classes, since those are most likely used by the scripts that generate them.
But I'd expect that adding attributes and keyboard handlers will do no harm to the existing scripts. Beware of already existing handlers for focus or keyboard events, though.
I would recommend making a list of attributes and handlers you suspect to conflict with the existing scripts, and searching the scripts for these, like onkeypress or onfocus event handlers.
The absolute best way to make your application/site accessible is to use semantic HTML. It doesn't matter if that HTML is generated by asp or jsp or whatever.
If you have a table, use a <table>.
If you have a heading, use an <h2>.
If you have a list, use a <ul>.
Use <section>, <article>, <nav>, <aside>, <header>, <footer>, etc
That's how you create structure on your page that a screen reader user will appreciate.
If you can't use native HTML, then fall back to ARIA, but treat it like salt. A little bit greatly enhances the flavor but too much spoils the meal.
If you can't use a native <h2>, then make sure you use the appropriate role and attributes.
<div role="heading" aria-level="2">this is my custom h2</div>
If you can't use a native <header>, then make sure you use the appropriate role and attributes.
<div role="banner">my header stuff goes in here</div>
I would recommend totally forgetting about JAWS scripts. It doesn't matter if that's what the customer thinks they should focus us. It's not about that customer. It's about that customer's customers. The end users. They should be able to use whatever screen reader they are used to using and most comfortable with. That's the whole purpose of accessibility - making the site usable and accessible by as many people as possible using whatever assistive technology they are used to using.
Following the Web Content Accessibility Guidelines (WCAG) will lead you to that result.
I am working on HTML5 and i came across various HTML5 semantic tags like <article> <section> <aside> <nav> <header> <footer> <audio> <video> <source> <track> <embed> <canvas> etc.
I would like to what exactly is the advantage of using these semantic tags. is it for fast loading or any other feature?
Please share your thoughts.
It's to accurately describe the content of the tag.
For example this means when Google (or any search bot) crawls a page, it can more accurately dissect it and assign relevance scores to the various bits of content.
Wikipedia has a nice simple definition:
Semantic HTML is the use of HTML markup to reinforce the semantics, or meaning, of the information in webpages rather than merely to define its presentation or look. Semantic HTML is processed by regular web browsers as well as by many other user agents. CSS is used to suggest its presentation to human users.
So whether a browser takes special action upon tags like audio and video is purely up to the developer of the browser rendering engine, but they are there to be used.
Advantages of semantic tags
It's easier for computers to understand what content is in your document and how it is structured. For example, having article tags would make it easier for a tool like Safari Reader or Readability to find the content of a blog post.
Screen readers will also have more information about what is on the page. This is incredibly useful for vision impaired users, especially since they can more easily jump to navigation controls and article contents while skipping less important content.
It's easier for developers to logically sort out parts of HTML documents, and easier to semantically add CSS styles around your HTML.
UPDATE 2: Edited again to more clearly focus on visitors with disabilities
Is applying ARIA landmark roles alone a major accessibility improvement, or a half-measure that doesn't accomplish very much? Are there other relatively easy things a site can do to significantly improve accessibility?
By accessibility, I mean usability by people with disabilities, for instance visual impairment, difficulty using a mouse, etc..
By simple, I mean large-scale changes to page structure on the site's main templates, rather than hand-tweaked changes to each page.
For example, the one step of applying ARIA landmark roles is in reach for many sites, just by updating their blog or content management software templates. Doing the whole nine yards to annotate every widget’s interaction state is much harder, unless the underlying platform already does it.
Here are some possible steps a site could take, all relatively low-hanging fruit:
Place all content within HTML5 semantic container tags, specifically article, aside ,nav, section, figure, figcaption, footer, header, and main
Assign ARIA landmark roles to content containers and HTML headings
Assign aria-labelledby and aria-describedby attributes to appropriate content containers
Set the title attribute for content containers (less desirable, since it's seen by all)
Which of those are worth doing? Taken together, would they make a real difference in accessibility for people with disabilities? Are there other simple things that improve accessibility?
(I'm specifically not talking about forms or interactivity, that's a whole other topic. I'm also not talking about making sure HTML and image colors have good contrast, not because it's unimportant, but because that has to be done on a case-by-case basic, rather than in global templates.)
You'll get the biggest accessibility impact focusing on strong keyboard navigation and thoughtful DOM structure including clear heading outline and semantic sectioning with HTML and ARIA. Keyboard navigation is the primary mode of navigation for screen reader users and many folks with mobility impairments, so a foundation there is a prerequisite to any actions or workflows in your site.
Do use HTML5 sectioning elements. Besides making your markup and CSS rules more elegant, it defines the page structure more clearly to screen readers and makes page navigation easier. The semantics of many elements are already supported - albeit inconsistently - in NVDA, JAWS and VoiceOver.
ARIA landmarks also have good support in these 3 screen readers, in particular as a way to skip redundant header content. Use role='main' on the containing element for your primary content.
aria-describedby and aria-labelledby are useful for complex forms and modals. Before relying on these attributes though, focus on creating coherent read order and clearly labeling and grouping form elements. Specifically, use the for attribute to associate <label>s with their controls, and use <fieldset>s with <legend> to group related controls.
Avoid using the title attribute in general. There is no way to display its content via keyboard focus so it is effectively useless for keyboard-only users who do not use screen readers, not to mention mobile devices.
Depending on the scope of your content, you'll need to go further than these recommendations for robust accessibility, but you've got the right idea in trying to address low hanging fruit first. It will go a long way.
By tagging this with section508*, it tells me the site you are making is for the US Federal Government, or a state that adopted the Standards. Section 508 has outlined Standards to be considered accessible to people with disabilities. Some agencies have developed their own checklist, which either extends the Standards, mimics them; such as HHS' checklists. I recommend you getting with the agency Section 508 Coordinator to see what they do for determining 508 compliance. However, if you are wanting your product to be used by a government agenncy, I recommend filling out a VPAT for it.
If you are wanting to build accessible sites, in general, I suggest following WCAG 2.0
Is applying ARIA landmark roles alone a major accessibility improvement, or a half-measure that doesn't accomplish very much?
ARIA helps accessibility somewhat. ARIA let's you mark certain areas of a page as hotspots per say. I suggest you look at my answers in accessibility or mine about ARIA
Are there other relatively easy things a site can do to significantly improve accessibility?
There are things that are pretty easy, I suggest checking out the links I posted above for a starting point, then ask questions regarding on implementation. WebAIM also has some resources on accessibility.
From comments
I'm looking for actions a site can take that will be of real practical benefit to users, even if they can't go as far as what Section 508 requires
I would recommend not moving forward with this mindset. All of the provisions of Section 508 or guidelines of WCAG have practical benefit, the question is which apply to your site/application. For example, if you have a table with one header row, and/or one column of headers, provision (g), would be applicable:
(g) Row and column headers shall be identified for data tables.
However, if you have a more complex table (g) would not be applicable, instead (h) would be:
(h) Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
However in WCAG, there is no such guideline for tables, it is tucked under 1.3.1, info and relationships and detailed in WCAG 2.0 Technique H51. I can make the same argument for every provision of 508, or guideline of WCAG 2.0.
Headings are by far the most used in-page navigation, most reader users are now aware or ARIA landmarks but usage habits are quite varied.
Yes HTML headings are the most widely used navigation method around because they have been around since HTML 2.0 (Nov 1995). However they are only a navigational option for people who use screen readers, and people who use the Opera web browser. There is probably an add-on for Firefox, but didn't look it up. If you are going to be implementing headings in your site/app (which I recommend), be conscious about what headings you use. They should form a hierarchy of sorts, so don't jump from a <h1> to an <h4> because the look of the font; instead, use an <h2>, and restyle with CSS.
This also is the same for ARIA. ARIA navigation is only available for JAWS, NVDA, and I believe WindowEyes, but for all other assistive technology, nope. There is an add-on for Firefox for basic navigation of ARIA Landmarks(personally I don't like it). However, until browsers implement a built-in way to navigate ARIA landmarks, you cannot just pop them in and say your site is now fully accessible.
*- keeping the part about Section 508 in for reference since the question was originally tagged with it.
A couple of simple but effective steps:
Ensure non-mouse users can see which element is in focus. Many CSS reset styles remove the browser defaults. A dotted line is better than colour
button:focus {
outline: dotted 1px #000;
}
a:focus {
outline: dotted 1px #000;
}
But if colour is used it should meet colour contrast requirements. Check out https://addons.mozilla.org/en-us/firefox/addon/juicy-studio-accessibility-too/
Put a "skip to main context link" as the first tab item on the page. Have a look at http://www.anz.com.au for a great example. Just tab into it.
It's important to note that screen reader users can navigate just using the headers (H1, H2 etc) so this is particularly important. Also note that they also use the down arrow to navigate content and tab for when they get to a form or form element.
Hope this is helpful.
Reduce the amount of clicks it takes to get somewhere, which also goes hand-in-hand with making sure that the most used features on the site are easily accessible from your main page. Also, make sure those same "vital" uses of your site are easily found on every page in the entire site.
You may think it's easy to just click home, and then access the vitals from there, but users tend to really dislike this architecture. Although, that is for main-stream, common users. If you're catering to a certain type of user, then the entire architecture needs to be tweaked.
Analytics are key... Good luck!
If I use XHTML 1.0 Strict currently, then should I not use those XHTML elements/tags and attributes which will not be in the HTML5 spec? E.g. <acronym> and <big>
If you want to be safe yes (and you should want to be safe, it's the....well, safest, route), use the tags appropriate to the DOCTYPE you're using of course.
In practice will it matter using deprecated tags? no, probably not for years to come. I'm not saying do it, just that browsers won't call you on it, at least not at the moment.
HTML isn't final yet, so it's not included, but you can view an updated "which tags are in my DTD?" here: http://www.w3schools.com/tags/ref_html_dtd.asp
Note that strictly, HTML5 never uses the term "Deprecated". "Absent" or "Obsolete" are used instead. I believe the reason is that "deprecated" implies that support for them may be removed in the future, whereas that is not currently considered likely by the browser manufacturers, because too many existing pages would break.
Also in at least one case, that of the profile attribute, the reason for making it obsolete is that it is useless, and therefore effort adding it is effort wasted. But if you already have it in your page, effort removing it is effort wasted, so you might as well leave it.
There again, HTML5 is becoming fragmented, and there is a proposal to add the profile attribute back in to HTML as a separate document from the main spec, as is the intention for RDFa and microdata.
In the same way, there are still proposals to remove or change the names of HTML5 elements and attributes which may or may not make it into the final spec.
For all these reasons, I'd say it's far too early to be putting in work to remove HTML5 "Absent" elements and attributes from your HTML documents.
Even if you leave them in there, it's a piece of cake to search and replace them with tags that are accepted in HTML 5.
There's no need to go searching through reams of code to change those tags, but yes, it's a good idea to phase them out. Use <abbr> instead of <acronym> and some form of CSS instead of <big>. The <strong> tag might be more appropriate in some cases if you style it to change the font size, or use one of the heading tags if that's more appropriate.
I have a messageboard and one of my users has written a greasemonkey script to stylize various elements within the page. He did a great job with it but in order to make his job easier, the first step in his script is to parse the current page and add several css classes to almost all html elements on the page. most of them aren't used to style the page at all, but instead to make it easier for him to query the couple elements per page that he will actually modify. for example class="thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345" etc etc
is this a standard practice? are there any downsides to adding lots of unnecessary css classes, either in javascript, or on the server if i were to add them to served pages too.
This looks to be using classes to embed arbitrary metadata into elements, which is certainly not what the class attribute was designed for. Given that its effects begin and end with a greasemonkey script and are thus localized to the client, it seems a harmless enough hack, but not one I'd advise duplicating on the server side.
HTML unfortunately doesn't provide much in the way of alternatives when it comes to metadata other than sticking in invalid attributes, so there is a mechanism that does add semantic meaning to the "class" attribute within existing tags -- namely microformats. There's a lot of breathless buzzwordy hype around microformats, but overall they do revolve around a best practice for areas where going all-xml is out of the question.
In terms of semantics, yes there are downsides. If you have classes that aren't descriptive of what the element actually is and are there for styling purposes only, this can hurt you down the road should you decide to redesign and/or restructure.
for instance, BAD:
<div class="header red left-side">
GOOD:
<div class="header main current-event">
If there is no associated style with a class that's assigned to element, then I believe the browser will just ignore it. So it will not increase your page processing time a lot if that's what you are worried about.
However, if there are lots and lots of classes for each element, then you have to realize that you are using valuable bandwidth and increasing the time it takes to load the entire page that way. You can avoid that problem by externalizing the CSS so that the browser can cache it.
Are you using jquery to query the elements that you really want to modify? It might turn out that its more easy to pick those elements with jquery selectors which seem difficult or impossible with standard JavaScript and thus you can possibly avoid all these extra unnecessary classes.
Bottom line, there is no problem in using lots of classes if they are needed, and that's perfectly fine for production, but if you don't need them, like in your case, there has to be a better solution that you can possibly come up with.
Just for a data point, I took a look at GMail's HTML yesterday (their buttons are very nice) and it's full of that kind of thing.
Here's an example:
class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"
Classes are not just for CSS, they're for the categorization of sections of markup. Applying styling based on that categorization is just one use. So if the classes are useful for other categorization purposes then that is fine, and perfectly good practice.