WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: How to handle Heading under Section

for

From: Mallory
Date: Apr 30, 2018 5:01AM

Hm,
looking at the page, I don't think I'd turn an image into a heading. I can see why it was done-- an image seemed easier than finding a custom font (but now if I'm zoomed in it pixellates, while a real font would remain sharp, better for low-vision to use a font or SVG if possible), and the text of the image both visually and content-wise appears to be "heading" the content below.

However even if the code were done the way *I* would do it (perhaps just a <h2 id="foo"><img alt="the heading text" src="..."></h2>), it presents the same problem-- sections are for grouping types of content, and must be labelled, and it makes little sense to have chunks of content that *aren't* headed by... headings. So almost every <section> I can ever think in my life to use would probably also, because it's a chunk of distinctive content, be headed by a heading, so it would always have this problem (if it's a problem) of the heading being read out twice if a screen reader is going to do that.

I kinda wonder then if there's any point in doing
<section>
<h2>I am heading, hear me roar</h2>
<p> special chunk of content, with a proper heading, but in a section because this content does belong together due to its information. Using a div would mean "I just need a box to group stuff in, maybe just for styling and for the lulz" instead.</p>
</section>

If this section is seen as unlabelled and therefore not a landmark (which, if the rest of the page is marked up well and there's a <main>, is no tragedy and probably better to be honest), then are we devs only using section in order to structure stuff up for ourselves? (Maybe like using <dl>s. I love using <dl>s but they don't really offer much to the end-users... it seems more just to make myself feel good :P)

I've been using sections in this way (assuming that the heading is the first thing and therefore clearly names the section of content to end-users) and not bothering to explicitly aria-labelledbying them (I would do that if content order was really weird).

cheers,
_mallory

On Mon, Apr 30, 2018, at 9:00 AM, Steve Faulkner wrote:
> +1 to Birkir section should only be announced as a region if it has an
> accessible name.
> Ensure that all content is contained a landmark, but only use landmark
> elements as macro containers.
>
> This may be helpful
> Easy content organisation with HTML5
> <https://developer.paciellogroup.com/blog/2015/09/easy-content-organisation-with-html5/
> >
>
> --
>
> Regards
>
> SteveF
> Current Standards Work @W3C
> <http://www.paciellogroup.com/blog/2015/03/current-standards-work-at-w3c/>;
>
> On 30 April 2018 at 06:36, Alexander Karelas < <EMAIL REMOVED> > wrote:
>
> > Here's my page, in case you'd like to look at it, to better assess the
> > situation: https://forums.baza.gr
> >
> > The sections (with headings) that I'm talking about are all of the 4
> > <section> elements on the page.
> >
> >
> >
> >
> > On 29/04/2018 09:09 μμ, Birkir R. Gunnarsson wrote:
> > > My opinion (not hard truth, just opinion) is that ARIA landmarks are
> > > most useful when describing visual structure (fixed sections) of the
> > > page, whereas headings describe the structure of the content.
> > > so landmarks are highly useful for separateing page header, main body
> > > and footer, also useful for marking fixed sections of the page like a
> > > stock ticker (complementary) navigation menus (account navigation,
> > > left navigation) etc. They are an equivalent to seeing sections of the
> > > page at fixed locations on the screen.
> > >
> > > I also think landmarks quickly lose their usefulness when you have too
> > > many of them, I'd say a rule of thumb should be no more than 5
> > > landmarks for a simple page, maybe 8 for a massive page.
> > >
> > > In your case, without seeing the page, I don't think you should assign
> > > landmarks to sections of content already identified with headings. It
> > > will increase verbosity with very little actual benefit.
> > > a region landmark without a label is not supposed to be a landmark. If
> > > a screen reader presents one as such, file an issue with the screen
> > > reader vendor.
> > >
> > >
> > >
> > >
> > > On 4/29/18, glen walker < <EMAIL REMOVED> > wrote:
> > >> NVDA does let me turn off landscape announcements but it turns it off
> > >> everywhere. I'm not sure if I could turn it off just for a particular
> > >> site. So in theory you could ask your users to change their screen
> > reader
> > >> settings to accommodate your design decisions.
> > >>
> > >>
> > >>
> > >> On Sun, Apr 29, 2018 at 10:17 AM, Jonathan Cohn < <EMAIL REMOVED> >
> > >> wrote:
> > >>
> > >>> On the other hand Screen readers probably could be adjusted so that
> > they
> > >>> would not double speak when the label of the section just entered is
> > the
> > >>> same as the element with virtual focus.
> > >>>
> > >>> -Jonathan
> > >>>
> > >>> Best wishes,
> > >>>
> > >>> Jonathan Cohn
> > >>>
> > >>>
> > >>>
> > >>>> On Apr 29, 2018, at 2:57 AM, glen walker < <EMAIL REMOVED> >
> > wrote:
> > >>>>
> > >>>> A <section> <https://www.w3.org/TR/html53/sections.html#the-section-
> > >>> element>
> > >>>> element has a region role <https://www.w3.org/TR/wai-aria-1.1/#region
> > >
> > >>> by
> > >>>> default, and a region is a landmark. While it's good to have bypass
> > >>> blocks
> > >>>> that a screen reader can use, it might be overkill to have both a
> > >>>> heading
> > >>>> and a landmark. The problem is you might have some screen reader
> > users
> > >>>> that like to navigate by headings and others that like to navigate by
> > >>>> landmarks. Hearing the heading twice is not ideal, but is certainly
> > >>> better
> > >>>> than not being labeled.
> > >>>>
> > >>>> Without knowing more details about your situation, my initial reaction
> > >>>> is
> > >>>> that the <section> is not needed. If you can't prevent the <section>
> > >>> from
> > >>>> being generated, then you might want to consider removing the landmark
> > >>> role
> > >>>> of the <section>. You can do this two ways:
> > >>>>
> > >>>> 1. If a <section> doesn't have a label (aria-label or
> > aria-labelledby),
> > >>>> then most screen readers ignore the region as a landmark.
> > >>>> 2. You can set role="presentation"
> > >>>>
> > >>>>
> > >>>>
> > >>>> On Sun, Apr 29, 2018 at 12:18 AM, Alexander Karelas <
> > >>> <EMAIL REMOVED> >
> > >>>> wrote:
> > >>>>
> > >>>>> My page has 4 sections.
> > >>>>>
> > >>>>> Each of the 4 sections contains a big heading.
> > >>>>>
> > >>>>> My question is:
> > >>>>>
> > >>>>> Should I label the 4 sections? If so, I would ideally like to label
> > >>>>> them
> > >>>>> with the 4 headings (with aria-labelledby, maybe).
> > >>>>>
> > >>>>> But when I do that, NVDA reads the heading twice when I press 'h' to
> > >>>>> browse the headings. It reads it once because I entered the section,
> > >>>>> and
> > >>>>> it reads it once more because it's reading the heading itself.
> > >>>>>
> > >>>>> Is that considered annoying? I mean, when the user presses 'h' 4
> > times
> > >>>>> to browse the 4 headings, they will hear each heading twice after
> > each
> > >>>>> keypress.
> > >>>>>
> > >>>>> How do you think I should handle this?
> > >>>>>
> > >>>>> Thank you,
> > >>>>>
> > >>>>>
> > >>>>> > > >>>>> > > >>>>> > > >>>>> > > >>>>>
> > >>>> > > >>>> > > >>>> > > >>>> > > >>> > > >>> > > >>> > > >>> > > >>>
> > >> > > >> > > >> > > >> > > >>
> > >
> >
> >
> > > > > > > > > >
> > > >