mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-09-10 18:22:37 -04:00
Tom Byers
663df4a4f9
An accessiblity audit done as part of Notify's service assessment raised the following problem with our big_number component. When you turn CSS off, the sentence in the component is split onto separate lines. This was because the number part is wrapped in a <div> which browsers were interpreting as being a separate sentence to the label. So "1 letter", where "letter" is the label, was seen as: "1" "letter" The accessibility expert consulted on this pointed out that this would sound confusing for users of screen readers when moving through the document sentence by sentence. These changes: - make the <div>s into <span>s which are 'phrasing content' and so are interpreted as part of the same sentence - change the CSS so the number will still sit on top of its label text The HTML5 spec has a section on how browsers should arrange text into paragraphs that explains what was happening in more detail: https://www.w3.org/TR/html52/dom.html#paragraphs