WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: what to do when <section> flags as accessibility error

for

From: JP Jamous
Date: Dec 3, 2016 12:17PM

Angela,

You can ignore such a flag even if it flags it as an error. Remember that an automated tool is only helpful in scanning large segments of markup quickly. However, a manual evaluation is always necessary. Otherwise, we can all go home and let those systems handle the markup when developers push them out to QA or Prod.

We do have many regions on our site and yes we use aria-label to give a description of those regions. That assists screen reader users in identifying the purpose of that region as they are scanning the page with quick navigation keys or pulling up a list of regions to choose one.

You may ignore this one for sure if the H1 is providing the description. Just remember that screen readers will not give that section a name if the user is navigating with quick navigation keys or through pulling up the list of regions on the page. That makes your UX bad. Personally, I'd like those regions with a description because I navigate pages fast.

I visited your page below and as I hit the letter R with JAWS it mentioned 2 regions on the page. I had to down-arrow to find out what links those regions contained. I couldn't tell your site navigation bar from that section you are talking about until I read the links. That way, you made it easy for sighted users to visually identify your site navigation region, but harder for me as a user.

This will be up to your department and how accessible you want your pages to be. It can be a pain, but it can also chase some customers away such as JP. Unless there is something on your site that I want badly, I would navigate away from this site. If you did not take the time to make your layout structured properly for screen reader users, busy people will tend to ignore your site.

That goes for sighted folks too. I was one told by a customer that if he cannot identify what he should click on the home page in 10 seconds, that's a waste of his time and would not want to be on that company's site at all. That was a Chief Operating Officer. I also heard it from senior customers, where they get frustrated and move away if the site is too busy. If the site is too busy with regions without a description, as a blind user and someone who has a very busy schedule, I am navigating from your site as well.

Just keep those UX tips in mind.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Angela French
Sent: Friday, December 2, 2016 1:25 PM
To: WebAim Forum ( <EMAIL REMOVED> ) < <EMAIL REMOVED> >
Subject: [WebAIM] what to do when <section> flags as accessibility error

Hello,
We are piloting the use of Siteimprove. One of its features is site-wide accessibility scanning and reporting. It is indeed helping us find things we had overlooked.

On our site (example page<http://www.sbctc.edu/starting-your-career/right-career-for-you.aspx>;) it is flagging the use of the html5 <section> tag. We have used this tag to delineate everything in-between (excluding) the top global navigation elements and the footer.

The error reads:

"The page contains an HTML5 <section> or a WAI-ARIA landmark of the type 'region'. These types of landmarks are very general and should be named to help users identify the purpose of the landmark"

It says the fix is to : "Use either the WAI-ARIA attribute 'aria-label' or 'aria-labelledby' to name the landmark in a way that clearly explains the purpose of the landmark to all users."

Looking back, the use of the <section> tag seems superfluous as there is only one. But doesn't the use of an h1 heading as the first thing within the section content function similarly to providing some sort of ARIA attribute such as 'aria-label' or 'aria-labelledby'?

I am looking for a solution that would be easy to implement site-wide. Removing the <section> element altogether would be a major pain.

Thank you, as always, for your opinions.



Angela French
Internet/Intranet Specialist
Washington State Board for Community and Technical Colleges
360-704-4316
<EMAIL REMOVED> <mailto: <EMAIL REMOVED> >
www.sbctc.edu<;http://www.sbctc.edu/>;