How can I build an a-buffer in WebGL?

I thought about saving the rgba and z values to some form of storage inside of the fragment shader.

Something like this:

for each pixel in fragment shader{
if(a>0&&a<255){save rgba and z to storage;};
};
for each pixel in storage{
sort z values;
blend;
draw;
};

Once I have all the rgba and z values I know how to sort and blend them.

I am open to other solutions of course. I am also open to WebGL2 solutions, I heard that it’s compatible with WebGL.

Note: This question is about a 3D environment. Depth sorting of triangles and gl.enable(gl.BLEND); don’t work as far as I know.

Thank you!