Minimum text size for accessibility

[Ellie_Linden]

I have looked through the ArcGIS Dashboard accessibility documentation but still have a question regarding text size. There are several elements (e.g. indicators, tables) where the only text size options seem to general categories (e.g. small/medium large). I acknowledge if I want to be most accessible, I could select the largest option. However, my organization has requirements that align with numeric minimum text size (i.e. size of 9). Is there a way to confirm what minimum text size is applied for each of the general size categories?  

[Joshua-Young]

One way is to use your browser's dev tools. If you right click on the text in question, select Inspect in the menu

That should take you straight to the HTML of the text and show the font size in pixels.

If you need the font size in points instead of pixels, you can copy/paste the text into word processing software being sure to keep the source formatting or you can use an online pixels to points converter.

[Ellie_Linden]

Thank you! It looks like that does give me the information I need in some instances (e.g. text within the Indicator element) but not in all cases. For example, when I click "inspect" over a Category selector I don't see "font-size" provided. It's possible it's hidden somewhere in the dev tools, but I'm wondering if there's an easier way to check this. 

[Joshua-Young]

Some of the elements are going to be hidden in the dev tools. This is not a perfect solution either but below is a simple JavaScript function that can be run in the dev tools console to output all the font-sizes on the page to a table in the console. It groups the font sizes by the element tag names but you can try other element properties to try to narrow down where a specific font size is being used. Just change el.tagName on line 7 to another element property like el.title

(() => {
    try {
        const elements = document.querySelectorAll('*');
        const fontSizesByTag = {};

        elements.forEach(el => {
            const tag = el.tagName
            const fontSize = window.getComputedStyle(el).fontSize;
            const fontSizePt = Number(fontSize.slice(0,-2)) * (72/96)
            const fontSizePtString = fontSize + '|' + fontSizePt.toString() + 'pt'

            if (!fontSizesByTag[tag]) {
                fontSizesByTag[tag] = new Set();
            }
            fontSizesByTag[tag].add(fontSizePtString);
        });

        // Convert Sets to arrays for easier reading
        const result = {};
        Object.keys(fontSizesByTag).forEach(tag => {
            result[tag] = Array.from(fontSizesByTag[tag]);
        });

        console.table(result);
        console.log("Font sizes grouped by element tag:", result);
    } catch (err) {
        console.error("Error while retrieving font sizes:", err);
    }
})();

Here is the location to run the script. You might get a prompt to allow pasting into the console before you can run it.