RE: Are these regions done correctly?

Hi Bryan,

* regions are landmarks. They are sometimes called orientation point, too, depending on your screen reader.
* As far as role is concerned, you can use <section> or <div role="region">. A <section role="region"> is something like <button role="button"> and not necessary. Using JAWS 2021, the role will not be spoken, but I can jump to aany of the regions/landmarks and I can show aa list of your regions/landmarks on a page, including the sections. 
* As far as name is concerned, naming with aria-label/aria-labelledby seems fine. When I jump to a region/landmark or list regions/landmarks, the name is announced properly.

Landmarks/Regions have been working now for twelve years or so. But there have been various issues concerning <section> and <article>, so identifying sections as landmarks and articles in screen readers is not always identical. The problem is often, that developers misuse these elements (e.g.  <section> instead of <p>). As a screen reader user you don't want every paragraph announced as a section.

So, as far as I can tell, sections are not identified in JAWS 2021, unless I specifically want to jump to the next section or list all of the sections of a page. I'm fine with that.

I would concentrate landmark navigation on headers, footers, navigation etc. Inside the main content navigation via headings would be the more natural way of moving about the page with a screen reader.

Jan


--
Hellbusch Accessibility Consulting
Chemnitzer Str. 50, 44139 Dortmund
Tel.: +49 (231) 58054815 Mobil: +49 (163) 3369925
--
Accessibility-Consulting seit 2000 

Leistungen, Bücher, Artikel: https://www.barrierefreies-webdesign.de
Blog: https://www.hellbusch.de


> -----Original Message-----
> From: bryan rasmussen <rasmussen.bryan@gmail.com>
> Sent: Saturday, February 20, 2021 10:07 PM
> To: w3c-wai-ig@w3.org
> Subject: Are these regions done correctly?
> 
> I am working at a typical film and video site and trying to improve the
> accessibility of it.
> 
> In this site there are a number of sections of links to streaming video arranged
> by subjects - these sections did not have aria-label or aria-labelledby attributes
> on them so I added them in order that they would function as region
> landmarks.
> 
> They look something like the following
> 
> <section role="region"
> aria-label="Episode Guide">
> 
> or
> 
> <section aria-labelledby="focusList-11"><div
> class="FocusList_titleContainer__2XUEm"><h2 id="focusList-11"> <!--
> -->Alt vores livesport</h2> with a bunch of subtree with links to
> different live streams.
> 
> 
> (I've removed the class attribute etc, as well as the subtree of course) each
> aria-label and aria.-labelledby are unique
> 
> When I look at the accessibility tree with Firefox developer's accessibility tool it
> shows me that these sections are regions, and not as a landmark which seems
> weird to me as I was under the impression that a region was a sort of
> landmark? Impression gained here https://developer.mozilla.org/en-
> US/docs/Web/Accessibility/ARIA/Roles/Region_role
> 
> Anyway this is an initial thing I've done which I'm trying to work out
> improvements for
> 
> but when I test it with voiceover on mac (catalina) - Danish language
> - I don't get anything worthwhile really.
> 
> There are probably 20 - 30 regions in the front page of the site (one intention is
> of course to restructure this to be 8-10) but when I go to the landmark menu
> using the rotor in voiceover it shows me 4 landmarks and no aria label from
> anywhere is used in the landmarks.
> Obviously I need to go test on a bunch of different platforms but frankly a
> result this bad in a major vendor (voiceover) makes me think
> - well that is not really going to be widely supported and isn't worth doing. It's
> like trying to use SVG in the browser in 2006 or maybe
> 2004 really.
> 
> So my current considerations are -
> 
> 1. have I done something wrong that when fixed will make the landmark
> navigation work correctly.
> 2. Is landmark navigation working over a broad number of devices etc.
> but not in Mac / Catalina - maybe Danish language problem?
> 3. Have I totally misunderstood how it is supposed to work, and if so is there
> anyway to structure my markup so that a user will be able to use landmark
> navigation to navigate to them?
> 3. Or is this part of the WAI spec so poorly supported that it isn't going to be
> worth doing anything with.
> 
> The site is available at https://play.tv2.dk/forside if anyone wants to look it
> over (although not sure what will happen if you are coming to it outside
> Denmark)
> 
> finally - my basic plan is to have about 10 regions/landmarks to page for users
> to navigate to, one of these landmarks is going to have a lot of subtrees in them
> arranged by subject like documentaries about funny stuff, and working people,
> or action films etc. so when one gets to this list of films region then one can
> start navigating further among the lists by headers - does this seem like a
> reasonable way to order it. Any suggestions?
> 
> Thanks,
> Bryan Rasmussen
>

Received on Sunday, 21 February 2021 12:37:10 UTC