a11y: Replace font-weight with <strong> to convey semantic meaning

[ghost]

Q&A (please complete the following information)

• OS: [e.g. macOS] Windows 10
• Browser: [e.g. chrome, safari] Chrome
• Version: [e.g. 22] 121
• Method of installation: [e.g. npm, dist assets] npm
• Swagger-UI version: [e.g. 3.10.0] Swagger UI React 5.11.3
• Swagger/OpenAPI version: [e.g. Swagger 2.0, OpenAPI 3.0] OpenAPI 3.0

Content & configuration

Basic / default Swagger UI rendering of Open API page.

Describe the bug you're encountering

We use the tool Sort Site to scan for 508 accessibility compliance. It is flagging that swagger-ui is using "font-weight" for bold text instead of . The error message is "Use semantic markup like "strong" instead of using the Css "font-weight" property. Use the "strong" element instead of the "span" element for bold text." This is a Level A violation: "F2: Failure of Success Criterion 1.3.1 due to using changes in text presentation to convey information without using the appropriate markup or text". https://www.w3.org/TR/WCAG20-TECHS/F2.html has nice examples of what this means, but basically if you are just using font-weight, you are not conveying meaning to those using assistive technology like "strong" does.

To reproduce...

No specific user interaction, since we are using the Sort Site tool. This error is occurring on a span with class "model model-title".

Expected behavior

Use "strong" to format the schema names and other elements instead of using font-weight

Screenshots

Here's a sample of where the problem occurs:

And here's the Sort Site error:

Additional context or thoughts

[mgifford]

@cjfreedman do you think that this could be a heading rather than a <strong>? Headings can help with navigation and are also often used in conjunction with list elements.

[ghost]

@mgifford According to accessibility rules, headers should not be used simply for formatting. Like if "h4" provided the desired formatting for this element, then some element above it on the page (such as "Schemas") needs to be styled with "h3", and an element above that on the page (such as "default") needs to be styled with "h2" and the page header needs to be styled with "h1".