Forum Discussion
How do screenreaders read headers in Rise?
Do the header blocks in Rise translate to H1 and H2 for screen readers? It looks like it's more simple, just header and subheader. I have been thinking of the lesson title as H1, a header as H2, and subheader as H3, but is that right? Actually, now that I write this, I realize I've been thinking of the lesson title and the header block both as H1.
Thinking of accessibility formatting, how does this work out?
Phil, you are correct the 'paragraph with heading' block produces an H2, and the subheading block is an H3. The H1 exists in two places- on the cover page (course title) and then each lesson title is also h1.
14 Replies
Phil, you are correct the 'paragraph with heading' block produces an H2, and the subheading block is an H3. The H1 exists in two places- on the cover page (course title) and then each lesson title is also h1.
Just talked to my teammates about this. Does anything happen to this when lesson headers are turned off?
I started thinking about that also, I assumed this option would remove the lesson title H1 altogether. But it doesn't, the lesson title is still there in the code. A parent element around the H1 is set to opacity:0. So it still takes up visible blank space, its just hidden to sighted users. I'm pretty sure a screen reader would read the H1 as usual. Kind of strange.
Thanks, that makes sense.
Glad to see others trying to address some of the Accessibility concerns we are seeing in our audits. I understand from the above that Rise really only has H1 (lesson titles) and then H2 and 3. For design purposes we commonly use Statements as well. PhillFoss do you know how statements translate to navigation from a headers/accessibility perspective? Is there a way that those can be used as headers as well? or do we have to use Headers/Subheaders in addition to the statements (which kinda defeats the purpose maybe)
I know you're asking me, but why do you want a statement marked a header? I'm thinking of statements as full sentences.
By default the Statement blocks use regular paragraphs so if using a screen reader it has no prominence over regular paragraph text. But you can change these paragraphs to h2-h5 elements inside the Statement blocks.
edit- adding screenshot of this, bottom left of the text dialog. This is a somewhat newish feature in Rise- change from paragraph to headings here KellyRipley
This sounds amazing! I have looked within the Edit, Style and Format menus of the statement blocks and do not see the option you are describing. Can you provide more guidance?
PhilWade From a design perspective there are times when a statement offers the esthetic we are looking for to seperate a section/introduce a new topic. Otherwise the Heading/Subheading options are pretty bland. Perhaps more seasoned users have found ways to be more creative in the application of Headings and Subheadings for visual interest. I'm open to learn from any and all suggestions :) It could very simply be that I just need to think about Headings and Subheadings differently in this regard.
But I also flag that only 2 levels of headings is not much in terms of navigation.
An example provided below
In their accessibility conformity report they state the following, but I dont see a means to "label" things as headers, perhaps I am misreading...
"Authors can use heading blocks and descriptive labels to clarify the structure and purpose of lesson content.
Built-in lesson controls include visible labels that describe their function."
Your example does look appealing.
We've used colors and images in header block to spice them up. My senior designer has been using the new custom blocks in a landscaping course like this. The header text is H2.
