![Firefox logo](https://assets-prod.sumo.prod.webservices.mozgcp.net/media/uploads/products/2020-04-14-08-36-13-8dda6f.png)
Cannot see formatting such as bold and italics with NVDA screen-reader on Archive of Our Own website
About three months ago, I changed the AO3 site skin to the Low Vision option, because I wanted to see if I could fix the then minor issue of not being able to see bold with my screen-reader, NVDA, when reading fics on the site. Some of the bold I knew to be there because I had personally put it in.
When I changed the skin, I was dismayed to find I could not only still not see bold, but I could no longer see italics with NVDA either. The AO3 sidebar menu was also tucked away behind a dropdown button, but I could open that up and get to the controls, so I didn't mind that so much. The formatting, however, posed a real problem, since italics are used for, among other things, emphasis, telepathic speech, and the speech of Pokémon in fanfics featuring humans who can understand Pokémon. So I definitely wanted this problem fixed.
I thought I could simply change the site skin back, but to my further dismay, switching back to the Default skin did not restore my former view of the site's pages. I began trying other things, seeking advice from other tech-savvy acquaintances after I'd exhausted all the possible fixes I could think of to no effect. Here is a list of everything I've already tried:
- As mentioned before, changing the site skin back with the buttons on the site
- Soft/Hard-Refreshing the page.
- Logging out of and back into my AO3 account to artificially end the session.
- Restarting the computer, and NVDA, by extension.
- Disabling each of the three extensions I have in Firefox, just in case one of them had caused the issue.
- Viewing the site while logged out to see if that made a difference.
- Cleared browser cache, and when that failed to help, also cleared specifically the AO3 cookies.
- Created a clean Firefox profile with no settings changed and no extensions added, pasted url of one of the pages I was using as a test into the address bar. Still no formatting visible.
- Viewed page in Incognito mode.
- Briefly thought I had a solution when I found the Page Styles submenu in the View menu, set the page to No Style. Got my old sidebar back, but not the formatting, and lost even that change after a refresh. Not ideal solution.
- Downloaded the portable version of Firefox, opened it and pasted in a url again. Still no formatting.
- Reluctantly, opened AO3 in Google Chrome. Could see all the formatting with NVDA when logged out, and when I logged in, could still see the formatting.
I also discovered Reader View while testing some of these things, and this allowed me to read the text of a fic or chapter with all its formatting, but that view doesn't include the Author's Notes, or the comments, and that sacrifices some of the nuance of those because I don't see the emphasis on any words/phrases without the formatting.
I have contacted the AO3 support team, but they are just as confused as I am and don't know what could have happened. They say they haven't changed anything on the site that they could pinpoint as causing this problem.
I have tried asking on the BlindTech email list I'm subscribed to, which is where I was given the link to Portable Firefox, but I have exhausted all their ideas as well, some of which were included in the above list.
Now I come to you. Please, if you can shed any light on what might have caused this problem, I would deeply, sincerely appreciate it.
Diperbarui oleh Trix pada
Semua Balasan (12)
Hoping someone has an idea of what is causing this problem. I will not make a habit of posting to bump up my question, as I do not want to seem pushy or anything, but I have exhausted all the avenues I know to try, save this one.
I have an update. My problem has not been solved, but I do have more information to add to this post and hope that someone will notice it and help me now, though the silence on this thread is telling.
I have upgraded to a desktop PC with Windows 11 and copied over my Firefox profile. I still have this problem with AO3 and therefore have still only been able to read fanfics with Reader View and not been able to read the formatting in comments/author's notes. I've noticed formatting does show up on information pages such as the front page of AO3, but on most pages I cannot see italics or bold within the body of works, or profiles, or fic summaries, or the aforementioned author's notes and comments on fics.
Please can someone shed any light on this? I'm still holding out hope that someone within Mozilla who is particularly tech-savvy can give me some idea of what I did to break AO3 in Firefox.
Please, someone notice this thread. I don't want to spam this forum, but I still haven't found a solution, and I love this browser and don't want to have to switch to Chrome just to read fanfics with all the formatting I'm used to seeing. I had hoped switching PCs would fix the problem, but since it hasn't, and since the issue carried over within the Firefox profile I transferred, someone in this community must know what is causing this. I'm not feeling very heard right now, since literally nobody has spoken up on this topic, even to tell me they don't have the issue or to try something I've already tried. I'd rather not have those responses, but even those responses are made by people who actually looked at the topic. At this point I'd be okay with someone dropping in to say "This doesn't make sense to us either, sorry!" At least then I'd be acknowledged!
AO3 = Archive of Our Own = https://archiveofourown.org/
I don't see anything about skins when I poke around on the site, but it sounds like the skins aren't really the problem.
I looked at https://archiveofourown .org/works/30349914/chapters/74817516 and see some bold and italics in the headings:
When I check using the Font Inspector, that is a font named "Lucida Sans Unicode", which is the second font in the site's list of fonts for this text (in order of preference):
"Lucida Grande", "Lucida Sans Unicode", "GNU Unifont", Verdana, Helvetica, sans-serif
That seems to be a built-in font in Windows 10.
Are you having problems with headings like that, or only uses of bold/italic in other places?
@jscher2000:
I can see bold in headings, and I can still see headings of all levels as headings. It's the formatting within the text of a chapter where the problems start, as well as in Author's Notes and comments, as I stated above.
Also, just to reiterate, I'm now on Windows 11. It hasn't made a difference to this issue, as I stated, but I thought I'd keep that in mind.
I've asked about this again on Tumblr, and there's someone suggesting it is an issue with profiles, though I don't understand how that could be. I have tried a clean profile, and Firefox Portable without any alterations, and neither of them allowed me to see the formatting.
Does bold text appear bold on other sites, it's only a problem on the AO3 site?
I realize this is not a very practical suggestion, but if you wouldn't mind testing...
You can inject a custom style rule into a web page manually using the Style Editor tool (Shift+F7). If something like this would be useful on an ongoing basis, you can use the Stylus extension or an optional userContent.css file to inject the rule automatically going forward.
To test it out:
(1) While on a problem page, press Shift+F7 to open the Style Editor panel.
(2) Above the file list on the left side of the editor, click the + button to create a new sheet.
(3) Paste in a custom style rule for text that is in a <strong> or <b> tag. Those are the tags people typically use to designate text that the browser should display in bold. In this case, we'll apply a light blue highlight:
strong, b { background-color: #0ff; }
The expected result would be like the following screenshot -- although your text presumably won't appear in bold like mine does:
You can close the Style Editor after that. Note that as soon as you leave or reload this page, that rule gets flushed.
Does the rule highlighted the text you expected to appear in bold? That would confirm that the HTML tags are intact, and either a style rule problem or a font problem is preventing the text from appearing bold as expected. Since you have this issue across different profiles, I wonder whether there might be a problem with the bold variant of whatever font your Firefox is using for the body text on that site?
Formatting of this nature is visible on all other sites, and when the fanfic is displayed in Reader view, and when it is downloaded as HTML and opened within Firefox.
I turned on reporting of colours with NVDA, and there wasn't a reported change to the colour of the text. Highlighting is also turned on by default in NVDA's Document Formatting settings, and that did not report a change either. Just to be sure I did the right thing, I pressed Shift+F7, then "Create New Style Sheet" at the top of the panel, then pasted in the code you gave me, then tabbed away and back, which closed the editor. The style should have been applied after that, right?
I can also see colours in the text all over the place with Report Colours toggled on. The passage on the page from one of my own fanfics that I always check when testing this issue, because the last line has bold in it and is very easy to find, was announced as "Very Dark Grey", but the bolded section is only the second half of the sentence, and the change, as I said, was not reported.
I tried adding this in Reader View as well, though as I've not messed with CSS at all before (I'm totally blind, hence the screen-reader, and I very much do not want to break something and be unable to fix it because I couldn't see what I was doing), I don't know if it works in Reader View. A change in the text colour still was not reported when I scrolled down to the bottom of the chapter to check, though as I said, I can see bold in Reader View.
Edit: Just tried this CSS on Tumblr, and didn't have a colour change reported there either. Maybe NVDA just can't see this particular blue highlight, but at the same time, when I pasted it into the editor after creating the new sheet, and scrolled down to the preview part, both "strong" and "b" were reported as being "light pale aqua-blue" (yes, that's the exact colour name reported), so I'm honestly not sure...
I can see bold on Tumblr, and everywhere else, as I said.
Diperbarui oleh Trix pada
@jscher2000 Is there nothing else I can try? :(
Could you test a different custom style rule to see whether it is a font issue? This rule switches in Arial for regular and regular italic text, and Verdana for bold and bold italic text:
/* Swap Lucida Grande to Arial for standard weights */ @font-face { font-family: 'Lucida Grande'; src: local(Arial); } /* Italic style */ @font-face { font-family: 'Lucida Grande'; font-style:italic; src: local('Arial Italic'); } /* Heavier weights use Verdana */ @font-face { font-family: 'Lucida Grande'; font-style:normal; font-weight:600; src: local('Verdana Bold'); } @font-face { font-family: 'Lucida Grande'; font-style:normal; font-weight:700; src: local('Verdana Bold'); } @font-face { font-family: 'Lucida Grande'; font-style:normal; font-weight:800; src: local('Verdana Bold'); } /* Heavier Italic */ @font-face { font-family: 'Lucida Grande'; font-style:italic; font-weight:600; src: local('Verdana Bold Italic'); } @font-face { font-family: 'Lucida Grande'; font-style:italic; font-weight:700; src: local('Verdana Bold Italic'); } @font-face { font-family: 'Lucida Grande'; font-style:italic; font-weight:800; src: local('Verdana Bold Italic'); }
Is the bold visible on that site with Verdana?
I'm curious: Is this a problem with the screen reader not seeing/reporting these formatting codes or are they missing on the page as well (maybe ask someone else to check this)?
@jscher2000: I used the code and the font change wasn't reported. I am beginning to think that I am doing the CSS wrong, or something else is up. Is copying/pasting the code directly into the edit box enough, or do I need to wrap some other code around it? I'm wondering if the CSS just isn't being recognised for some reason, and that seems most likely.
@cor-el:
I tried using the accessibility inspector thing, and the bit of text that is in bold was cut into its own section within the paragraph, so I assume the browser can still see the changes behind the scenes. I mean, using Reader View allows NVDA to see the formatting as well, so I did already know that, but if it's showing up in the Accessibility Checker, as overly-complicated as that seems to be, it gives me hope that we may be able to get to the bottom of this eight-month-old mystery.
The last time my sighted housemate looked at my Firefox, it was on my laptop, and for some reason the writing was all really tiny and she has a vision impairment and dyslexia, which makes reading tiny writing very difficult for her. I don't know if she can see the writing in Firefox better on my new monitor for my PC, but I'll see if I can get her to look later.
Update: Got my housemate to look at the page, and she could see the difference in the sentence I always check against.
Also, is it relevant that NVDA reports the font as being "Lucida Sans Unicode?" Because that's what it's calling The font and you called it "Lucida Grande" up there.
Diperbarui oleh Trix pada
Does anyone else here have any suggestions as to a measure I could try that isn't temporary and applies only to AO3? I thought with previous lines of inquiry that we were getting closer to finding the answer to this problem than I have in months...