When I post reviews to my blog I include a star rating in the title with star characters like this: ★★★☆☆
I want this not to be a mess for screen readers so I decided to wrap them in spans with ARIA labels like this: <span aria-label="3 stars">★★★☆☆</span>
But trying to look more into accessibility I am finding people saying that aria-label should only be used on interactive elements or elements with a specific role assigned and not general text but then I am not sure what alternative to use here to make this work better. Does anyone have any specific suggestions for what to do here or good general guides on accessibility to read?
Also is there any practises over labelling things that are correct names but that screen readers are probably going to struggle with. E.g. the new Gundam show is officially called “Mobile Suit Gundam GQuuuuuuX” which I understand is meant to be pronounced something like “G-Quacks” or labelling “Kevin Can F**k Himself” to be clearly pronounced without the censoring.
Another weird question I’ve thought of: Does having a span in the middle of a word (e.g. if yo were doing some decorative text on just part of a word for whatever reason) fuck up accessibility? Or even bolding or italicising parts of words? Like if I write unimportant to indicate I am emphasising that part of the word?